import { Layout } from 'antd'
import React, { useState } from 'react'
import { useRoutes } from 'react-router'
import SideMenu from '../../components/SideMenu'
import TopHeader from '../../components/TopHeader'
import routes from '../../routes'
import './Sandbox.less'

const { Content } = Layout

export default function Sandbox(props) {

  const [collapsed, setCollapsed] = useState(false)
  const element = useRoutes(routes)

  const setMenuCollapsed = (collapsed) => {
    setCollapsed(collapsed)
  }

  return (
    <Layout>
      <SideMenu collapsed={collapsed} />
      <Layout className="site-layout">
        <TopHeader setMenuCollapsed={setMenuCollapsed} setIsLogin={props.setIsLogin} />
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
            overflow: 'auto'
          }}
        >
          {element}
        </Content>
      </Layout>
    </Layout>
  )
}
